<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            
            background: #f1f1f1;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .4348rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        header .left{
            background-image: url(../../../images/header/left.png) !important;
        }
        section{/*
            border: 1px solid rgb(0, 255, 21);*/
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            
        }
        .container{/*
            border: 1px solid rgb(0, 255, 21);*/
            margin-top: .9662rem;
            width: 90%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container>div{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .container>div>span{
            color: #434343;
            font-size: .4106rem;
        }
        input{
            margin-top: .2415rem;
            width: 100%;
            height: 1.087rem;
            border: none;
            outline: none;
            font-size: .4348rem;
            box-sizing: border-box;
            padding-left: .1208rem;
            border-radius: .0121rem;
            background: #fcfcfc;
        }
        #code{
            flex: 1;
            margin-right: .2415rem;
            margin-top: 0;
            background: #fcfcfc;
        }
        
        button{
            display: inline-block;
            border: none;
            border-radius: .1208rem;
            font-size: .4106rem;
            background: #2493f1;
            color: #fff;
            margin-top: .4831rem;
            margin-bottom: .4831rem;
            width: 100%;
            height: 1.087rem;
        }
        .btn1{
            background: #b8b8b8;
        }
        .container .box2{
            display: none;
        }
        .box2 div{
            /*
            border: 1px solid rgb(0, 255, 21);*/
            margin-top: .1208rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 1.2077rem;
        }
        .box2 button{
            width: 3.6232rem;
            margin: 0;
        }
        




        /*弹窗样式*/
        #alert {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .window {
            border-radius: .2415rem;
            font-size: .4348rem;
            color: #2c2c2c;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*
            box-sizing: border-box;
            padding: .4831rem .9662rem;*/
            background-color: #ffffff;
            overflow: hidden;
        }

        .window .alt_title {
            /*
            border: 1px solid red;*/
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 1.087rem;
            font-weight: 600;

        }

        .window .alt_body {
            /*
            border: 1px solid red;*/
            width: 100%;
            /**/
            min-height: 1.9324rem;
            box-sizing: border-box;
            padding: .3623rem .4831rem .4831rem .4831rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .4106rem;
        }

        .window .action1 {
            /**/
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
            display: flex;
            flex-direction: row;

        }

        .window .action1 div {
            width: 50%;
            height: 1.2077rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb4c4c;
        }

        .window .action2 {
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
        }

        .window .action2 div {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1.2077rem;
            color: #4c97fb;
        }

        .window .action1 div:nth-child(1) {
            border-right: .0121rem solid rgb(207, 207, 207);
        }

        .window .action1 div:nth-child(2) {
            color: #4c97fb;
            border-left: .0121rem solid rgb(207, 207, 207);
        }
    </style>
    <link rel="stylesheet" href="../../../css/header.css">
    <script src="../../../lib/jquery.min.js"></script>
    <script src="../../../lib/axios.js"></script>
    <script src="../../../lib/vue.js"></script>
    
</head>
<body>
    
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">邮箱验证</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
        <div class="container">
            <div>
                <span>请输入邮箱</span><input type="text" v-model="mail" @input="checkMail()" id="email" placeholder="*****@qq.com">
                <button disabled class="btn1" type="button" v-on:click.once="handleClick(1)">发送验证码</button>
            </div>         
            <div class="box2">
                <span>填写验证码</span>
                <div>
                    <input type="text" v-model="code" id="code" placeholder="输入验证码">
                    <button class="btn2" type="button" @click="handleClick(2)">验证</button>
                </div>
                
            </div>        
            
        </div>





            <!-- 弹窗 -->
            <div id="alert" v-show="alertShow">
                <div class="window">
                    <div class="alt_title">{{alt_title}}</div>
                    <div class="alt_body">{{alt_body}}</div>
                    <div class="action action1" v-show="action1Show">
                        <div class="cancel" @click="cancel()">取消</div>
                        <div class="do" @click="yes()">确定</div>
                    </div>
                    <div class="action action2" v-show="!action1Show">
                        <div class="cancel" @click="cancel()">确定</div>
                    </div>
                </div>
            </div>


    </section>

    <script>
        new Vue({
            el: "section",
            data: {
                id: "",
                mail: "",
                code: "",
                alertShow: false,
                action1Show: false,
                alt_title: "提示",
                alt_body: "",
                cancelCode: 0
            },
            methods: {
                changeBtn1(r) {
                    let btn1 = document.querySelector(".btn1")
                    if(r === 1) {//disabled=true
                        btn1.style.background='#b8b8b8'
                        btn1.disabled=true
                        
                    }else if(r === 2){//disabled=false
                        btn1.disabled=false
                        btn1.style.background='#2493f1'
                    }
                },
                checkMail(){
                    if(this.mail.substring(this.mail.length-7, this.mail.length) !== '@qq.com') {
                        console.warn('邮箱格式不正确')
                        this.changeBtn1(1)
                        
                    }else{
                        console.log('邮箱格式正确')
                        this.changeBtn1(2)
                    }
                },
                handleClick(r) {
                    let btn1 = document.querySelector(".btn1")
                    var myEmail = this.mail
                    switch (r) {
                        case 1:
                            if(myEmail.substring(myEmail.length-7, myEmail.length) !== '@qq.com') {
                                this.changeBtn1(1)
                            }else{
                                this.changeBtn1(2)
                                console.log("btn1被点击")
                                //发送请求
                                /**/
                                axios.post("https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/emailCode", {method: 'sendCode', email: this.mail})
                                .then(res=>{
                                    console.log(res.data)
                                    btn1.innerHTML='发送中...'
                                    if(res.data.status === 1){//发送成功
                                        btn1.innerHTML='已发送'
                                        document.querySelector(".box2").style.display='flex'
                                        var codeId = res.data.id
                                        //document.querySelector(".btn2").onclick=handleClick(2,codeId)
                                        let btn2 = document.querySelector(".btn2")
                                        btn2.setAttribute("codeId", codeId)
                                    }else{
                                        btn1.style.innerHTMLl='发送失败'
                                        setTimeout(()=>{
                                            location.reload()
                                        }, 800)

                                    }
                                })
                                this.changeBtn1(1)

                                
                            };
                        break;
                        case 2:
                        let btn2 = document.querySelector(".btn2")
                        var codeId = btn2.getAttribute("codeId")
                        console.log('method: '+'validateCode')
                        console.log('codeId: '+codeId)
                        console.log('email: '+email.value)
                        console.log('code: '+code.value)
                            axios.post("https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/emailCode",{method: 'validateCode', id: this.id, codeId: codeId, email: this.mail, code: this.code})
                            .then(res=>{
                                this.alertShow = true
                                console.log(res.data)
                                switch (res.data.status) {
                                    case 1:
                                        this.alt_body = '验证成功！'
                                        this.cancelCode = 1
                                        break;
                                    case 0:
                                        this.alt_body = '验证失败！'
                                        break;
                                    
                                    case -2:
                                        this.alt_body = '邮箱无效'
                                        break;
                                    
                                    case -4:
                                        this.alt_body = '已验证'
                                        break;
                                    
                                    case -3:
                                        this.alt_body = '验证码过期'
                                        break;
                                    
                                    case -1:
                                        this.alt_body = '未发送验证码'
                                        break;

                                    case -6:
                                        this.alt_body = '该邮箱已绑定过账户'
                                        break;
                                    
                                }
                                setTimeout(()=>{
                                    btn2.innerHTML='验证'
                                }, 5000)
                            })
                        break;
                    }
                },
                cancel() {
                    console.log(this.cancelCode)
                    if(this.cancelCode === 0){
                        this.alertShow = false
                    }else if(this.cancelCode === 1){
                        this.alertShow = false
                        window.history.go(-1)
                    }
                    
                },

                
            },

            mounted() {
                let userInfo = localStorage.getItem('XGB-user')
                let id = JSON.parse(userInfo).id
                this.id = id
            }
        })
        

    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>